<template>

  <a-drawer
    :title='title'
    width='50%'
    :visible='visible'
    :confirmLoading='confirmLoading'
    switchFullscreen
    @ok='handleOk'
    @close='handleCancel'
    cancelText='关闭'
    style='height: 100%;overflow: auto;padding-bottom: 53px;'>

    <a-spin :spinning='confirmLoading'>

      <a-form :form='form'>

        <template v-if="title==='新增'">
          <a-form-item label='门店' :labelCol='labelCol' :wrapperCol='wrapperCol'>
            <!--            <j-select-terminal placeholder="请选择门店" v-decorator="['terminals', validatorRules.terminals]"-->
            <!--                               :trigger-change="true"></j-select-terminal>-->
            <app-stores placeholder='请选择门店' @select='selects'
                        v-decorator="['terminalCode', validatorRules.terminalCode]"
                        :trigger-change='true'></app-stores>
          </a-form-item>

          <CodeConfigModal
            modal-width='90%'
            :showCode="'选择经销商'"
            ref='CodeConfigModal'
            @ok='handelSaveOk'>
          </CodeConfigModal>
          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' hasFeedback label='归属经销商名'>
            <!--            <a-input placeholder="经销商名称" readonly v-model="custName"/>-->
            <!--            <a-button icon="search" @click="handleToCust"></a-button>-->
            <a-input-search placeholder='经销商名称' readOnly v-model='custName' @search='handleToCust'>
            </a-input-search>
          </a-form-item>
        </template>


        <template v-if="title==='编辑'">
          <a-form-item label='门店编号' :labelCol='labelCol' :wrapperCol='wrapperCol'>
            <a-input placeholder='请输入门店编号' :disabled="title=='编辑'"
                     v-decorator="['terminalCode', validatorRules.terminalCode]"
                     readOnly />
          </a-form-item>
          <a-form-item label='门店名称' :labelCol='labelCol' :wrapperCol='wrapperCol'>
            <a-input placeholder='请输入门店名称' :disabled="title=='编辑'"
                     v-decorator="['terminalName', validatorRules.terminalName]"
                     readOnly />
          </a-form-item>
          <a-form-item label='经销商编号' :labelCol='labelCol' :wrapperCol='wrapperCol'>
            <a-input placeholder='请输入经销商编号' :disabled="title=='编辑'" v-decorator="['custCode', validatorRules.custCode]"
                     readOnly />
          </a-form-item>
          <a-form-item label='经销商名称' :labelCol='labelCol' :wrapperCol='wrapperCol'>
            <a-input placeholder='请输入经销商名称' :disabled="title=='编辑'" v-decorator="['custName', validatorRules.custName]"
                     readOnly />
          </a-form-item>
        </template>

        <a-form-item label='当前费用池余额' :labelCol='labelCol' :wrapperCol='wrapperCol'>
          <a-input placeholder='0' v-decorator="['amount', {}]"
                   :readOnly="title==='编辑'" />
        </a-form-item>

        <a-form-item label='本次调整值' v-if='this.model.id!=null' :labelCol='labelCol' :wrapperCol='wrapperCol'>
          <a-input placeholder='0' v-decorator="['currentAmount', validatorRules.currentAmount]" @change='inpteValue' />
        </a-form-item>

        <a-form-item label='调整后余额' v-if='this.model.id!=null' :labelCol='labelCol' :wrapperCol='wrapperCol'>
          <a-input placeholder='0' v-model='quota' readOnly />
        </a-form-item>

        <a-form-item
          :labelCol='labelCol'
          :wrapperCol='wrapperCol'
          label='备注'>
          <a-textarea placeholder='请输入备注' v-decorator="['remarks', validatorRules.remarks]" />
        </a-form-item>
      </a-form>

    </a-spin>
    <!--    v-show="!disableSubmit"-->
    <div class='drawer-bootom-button'>
      <a-popconfirm title='确定放弃编辑？' @confirm='handleCancel' okText='确定' cancelText='取消'>
        <a-button style='margin-right: .8rem'>取消</a-button>
      </a-popconfirm>
      <a-button @click='handleOk' type='primary' :loading='confirmLoading'>提交</a-button>
    </div>
  </a-drawer>

</template>

<script>
import CodeConfigModal from '@/components/cn-select-popup/CodeConfigModal'
// import appStores from '@/views/mdm/couponStore/modules/appStores'
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import AFormItem from 'ant-design-vue/es/form/FormItem'
import ATextarea from 'ant-design-vue/es/input/TextArea'
import JImageUpload from '@/components/cn-form/JImageUpload'
import JTreeSelect from '@/components/cn-form/JTreeSelect'
import JSelectUserByDep from '@/components/cn-select-popup/JSelectUserByDep'
import JSelectTerminal from '@/components/cn-select-popup/JSelectTerminal'

export default {
  name: 'TerminalPoolModal',
  components: {
    JImageUpload,
    AFormItem,
    ATextarea,
    JTreeSelect,
    JSelectUserByDep,
    JSelectTerminal,
    // appStores,
    CodeConfigModal
  },
  data() {
    return {
      quota: 0,
      custCode: '',
      custName: '',
      showCode: 4,
      terminalName: '',
      terminalCode: '',
      title: '操作',
      visible: false,
      selecttype: '',
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },

      confirmLoading: false,

      form: this.$form.createForm(this),

      validatorRules: {
        terminals: {
          rules: [{
            required: true, message: ''
          }]
        },
        terminalCode: {
          rules: [{
            required: true, message: ''
          }]
        },
        terminalName: {
          rules: [{
            required: true, message: ''
          }]
        },
        custCode: {
          rules: [{
            required: true, message: ''
          }]
        },
        custName: {
          rules: [{
            required: true, message: ''
          }]
        },
        currentAmount: {
          rules: [{
            required: true, message: ''
          }]
        },
        remarks: {
          rules: [{
            required: true, message: ''
          }]
        }
      },
      url: {
        add: window._CONFIG['domianURL'] + '/terminal/cnTerminalPool/saveOrUpdate',
        edit: window._CONFIG['domianURL'] + '/terminal/cnTerminalPool/updateAmount'
      }
    }
  },
  methods: {
    inpteValue() {
      this.$nextTick(() => {
        this.form.validateFields((err, values) => {
          let amount = this.model.amount != undefined ? this.model.amount : '0'
          let currentAmount = values.currentAmount != undefined ? values.currentAmount : '0'
          this.quota = Number(amount) + Number(currentAmount)
        })
      })
    },
    handelSaveOk(value) {
      this.custName = value.name
      this.custCode = value.code
    },
    handleToCust() {
      if (this.terminalCode == '' || this.terminalCode == undefined) {
        this.$message.warning('请选择门店')
        return
      }
      this.$refs.CodeConfigModal.showModal(null, this.terminalCode)
    },
    selects(value) {
      this.terminalName = value[0].terminalName
      this.terminalCode = value[0].terminalCode
    },
    dotype(val) {
      this.selecttype = val
    },
    add() {
      this.edit({})
    },
    edit(record) {
      console.log(record)
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'terminalCode', 'terminalName',
          'custCode', 'custName', 'amount'))
      })
    },
    close() {
      this.custName = null
      this.terminalCode = null
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          method = 'post'
          let formData = Object.assign(this.model, values)
          if (this.title === '新增') {
            formData.terminalName = this.terminalName
            formData.terminalCode = this.terminalCode
            formData.custCode = this.custCode
            formData.custName = this.custName
            formData.dataType = 1
            httpurl += this.url.add
          } else {
            httpurl += this.url.edit
            formData.dataType = 2
          }
          //时间格式化
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.close()
          })
        }
      })
    },
    handleCancel() {
      this.close()
    }
  }
}
</script>

<style scoped>
.drawer-bootom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>